<template>
  <div id="recommend">
    <div class="recommend-title">热销推荐</div>
    <ul>
      <li class="item b-1px-b" v-for="(item,index) of recUrlList" :key="index">
        <img class="item-img" :src="item.imgUrl"/>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recUrlList: [
        {
          id: '01',
          title: '上海迪士尼乐园',
          desc: '全球最大的迪士尼城堡',
          imgUrl: require('images/recommends/r1.jpg')
        },
        {
          id: '02',
          title: '上海玛雅海滩公园',
          desc: '绿色、生态、环保节能为一体的独立水处理系统',
          imgUrl: require('images/recommends/r2.jpg')
        },
        {
          id: '03',
          title: '上海杜莎夫人蜡像馆',
          desc: '华丽空间闪耀出亦梦亦幻的魔力',
          imgUrl: require('images/recommends/r3.jpg')
        },
        {
          id: '04',
          title: '上海新天地',
          desc: '一个具有上海历史文化风貌,中西融合的都市旅游景点',
          imgUrl: require('images/recommends/r4.jpg')
        },
        {
          id: '05',
          title: '上海欢乐谷',
          desc: '神奇马戏团',
          imgUrl: require('images/recommends/r5.jpg')
        },
        {
          id: '06',
          title: '上海迪士尼一日游',
          desc: '这里可供游客尽情享受多日休闲娱乐时光',
          imgUrl: require('images/recommends/r6.jpg')
        },
        {
          id: '07',
          title: '上海野生动物园',
          desc: '欢迎您来到上海野生动物园',
          imgUrl: require('images/recommends/r7.jpg')
        },
        {
          id: '08',
          title: '豫园',
          desc: '上海豫园位于上海豫园旅游商业区的东北部',
          imgUrl: require('images/recommends/r8.jpg')
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .recommend-title
    line-height: .8rem
    background: #eee
    text-indent: .2rem
    margin-top: .2rem
  .item
    display:flex
    height: 1.9rem
    overflow: hidden
    .item-img
      width: 1.7rem
      height: 1.7rem
      padding: .1rem
    .item-info
      flex: auto
      padding: .1rem
      min-width: 0
      .item-title
        line-height: .54rem
        font-size: .32rem
        ellipsis()
      .item-desc
        line-height: .4rem
        color: #aaa
        ellipsis()
      .item-button
        display: inline-block
        line-height: .44rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        margin-top: .16rem
        color: #fff
        border: none
        outline: none
</style>
